<template>
  <div class="material-box">
      <div class="material-tool-box">
          <el-input
            size="mini"
            placeholder="请输入查询的标签"
            class="seach-input"
            v-model="keyword"
          />
          <el-button size="mini" @click="searchMaterial">搜索</el-button>
          <el-button size="mini" type="primary" @click="showUpload = true">上传</el-button>
          <image-upload
            :show="showUpload && activeName === 'image'"
            @close="showUpload = false"
            @success="loadMaterial"
            />
          <video-upload
            :show="showUpload && activeName === 'video'"
            @close="showUpload = false"
            @success="loadMaterial"
          />
          <audio-upload
            :show="showUpload && activeName === 'audio'"
            @close="showUpload = false"
            @success="loadMaterial"
          />
      </div>
    <el-tabs v-model="activeName" @tab-click="keyword = ''">
        <el-tab-pane label="图片" name="image">
            <image-panel :keyword="keyword" ref="imagePanel"/>
        </el-tab-pane>
        <el-tab-pane label="视频" name="video">
            <video-panel :keyword="keyword" ref="videoPanel"/>
        </el-tab-pane>
        <el-tab-pane label="音频" name="audio">
            <audio-panel :keyword="keyword" ref="audioPanel"/>
        </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import ImageUpload from './ImageUpload.vue';
import ImagePanel from './ImagePanel.vue';
import VideoUpload from './VideoUpload.vue';
import VideoPanel from './VideoPanel.vue';
import AudioUpload from './AudioUpload.vue';
import AudioPanel from './AudioPanel.vue';
export default {
    components: {
        ImageUpload,
        ImagePanel,
        VideoPanel,
        VideoUpload,
        AudioUpload,
        AudioPanel,
    },
    data() {
        return {
            activeName: 'image',
            keyword: '',
            showUpload: false,
            
        };
    },
    created() {

    },
    methods: {
        searchMaterial() {
            const { activeName } = this;
            if (activeName === 'image') {
                this.$refs.imagePanel.getMaterial();
            } else if (activeName === 'video') {
                this.$refs.videoPanel.getMaterial();
            } else if (activeName === 'audio') {
                this.$refs.audioPanel.getMaterial();
            }
        },
        loadMaterial() {
            this.searchMaterial();
            this.showUpload = false;
        },
    }
}
</script>

<style lang="less" scoped>
.material-box {
    width: 100%;
    height: 100%;
    position: relative;
    .material-tool-box {
        position: absolute;
        right: 12px;
        top: 0;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        z-index: 10;
        .seach-input {
            margin-right: 8px;
        }
    }
}
</style>